import React, { useState } from 'react'
import { HomeTopSearchStyle } from '../style'
import { useHistory } from 'react-router-dom'
import { useStore } from 'react-redux'

const TopSearch = (props) => {

  const store = useStore()
  const isApplet = store.getState().appConfig.isApplet
  const history = useHistory();
  const [searchKey, setSearchKey] = useState('')


  return (

    <HomeTopSearchStyle>
      <div className="top flex-row">

        <div className="category flex-column" onClick={e => { isApplet ? window.navigateToWebWiew('/category') : history.push('/category') }}>
          <img src="https://res.lexiangpingou.cn/images/826/2020/11/NK1Q1vXvh3VhyNXoZlYd1OK13LOYNv.png" alt="" />
           <span>
           分类
           </span>
        </div>

        <div className="search flex-row">
          <div className="container flex-row">
            <input placeholder="请输入关键词搜索" onChange={e => { setSearchKey(e.target.value) }} type="search" />
            <button onClick={e => { props.getSerachData(searchKey) }} >搜索</button>
          </div>
        </div>
      </div>
    </HomeTopSearchStyle>
  )

}

export default TopSearch